<!DOCTYPE html>
<html lang="en-us">
	<head>
		<meta charset="utf-8">
		<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->

		<title> Tracker Club </title>
		<meta name="description" content="">
		<meta name="author" content="">
			
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<!-- Basic Styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" media="screen" href="css/font-awesome.min.css">

		<!-- SmartAdmin Styles : Please note (smartadmin-production.css) was created using LESS variables -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-production.css">
		<link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-skins.css">

		<!-- SmartAdmin RTL Support is under construction
		<link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-rtl.css"> -->

		<!-- We recommend you use "your_style.css" to override SmartAdmin
		     specific styles this will also ensure you retrain your customization with each SmartAdmin update.
		<link rel="stylesheet" type="text/css" media="screen" href="css/your_style.css"> -->

		<!-- Demo purpose only: goes with demo.js, you can delete this css when designing your own WebApp
		<link rel="stylesheet" type="text/css" media="screen" href="css/demo.css">
		 -->
		<!-- GOOGLE FONT 
		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,700">
		-->
		
		<!-- CSS Personalizado -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/trackerclub.css">
		
	</head>

<style>

body {
  overflow-y: scroll;
}

.label_speed {
	position:absolute;
	right:5px;
	bottom:0px;
	width: 60px;
	height: 60px;
	font-weight: bold;
	font-size: 16px;
	text-align:center;
	
}

.label_km {
	position:absolute;
	right:5px;
	bottom:30px;
	width: 60px;
	font-weight: bold;
	font-size: 10px;
	text-align:center;
	
}

.img_speed {
	position:absolute;
	right:5px;
	bottom:10px;
	width: 60px;
	height: 60px;
	text-align:center;
	
}
</style>	

	<body class="">
	<div id="txtError"></div>
	<div class="img_speed"><img src="img/img_speed.png" width="50"></div>
	<div id="txtSpeed" class="label_speed">0</div>
	<div id="txtKm" class="label_km">Km/h</div>	
			
			<!-- MAIN CONTENT -->
			<div id="content">
			
			<div class="alert title-info">
				<strong>Cronômetro - 0 a 100Km/h</strong>
			</div>
			
		<div align="center">
			<div class="display-counter" id="time-counter"></div>
			
			<div id="dvBtReady" style="display: block;">				
			<button type="button" class="btn btn-labeled btn-default">
			 <span class="btn-label">
			  <i class="glyphicon glyphicon-ok"></i>
			 </span>Preparar
			</button>			
			</div>
			
			<div id="dvBtWait" style="display: none;">	
			<button type="button" class="btn btn-labeled btn-success" onclick="resetToStart();">
			 <span class="btn-label">
			  <i class="glyphicon glyphicon-ok"></i>
			 </span>Acelerar
			</button>		
			</div>		
			
			
			<div id="dvBtStop" style="display: none;">	
			<button type="button" class="btn btn-labeled btn-danger" onclick="resetToStart();">
			 <span class="btn-label">
			  <i class="glyphicon glyphicon-ok"></i>
			 </span>Reiniciar
			</button>		
			</div>				
					
			
		</div>			
		<br/>
		<table id="table-cronometer" class="table table-bordered">
				<thead>
					<tr class="header">
						<th>#</th>
						<th>Tempo</th>
						<th>Modelo</th>
					</tr>
				</thead>
				<tbody id="tbodyid">
				</tbody>
			</table>				
			</div>
			<!-- END MAIN CONTENT -->

		</div>
		<!-- END MAIN PANEL -->


		<!--================================================== -->

		<!-- PACE LOADER - turn this on if you want ajax loading to show (caution: uses lots of memory on iDevices)
		<script data-pace-options='{ "restartOnRequestAfter": true }' src="js/plugin/pace/pace.min.js"></script>-->

		<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
		<script>
			if (!window.jQuery) {
				document.write('<script src="js/libs/jquery-2.0.2.min.js"><\/script>');
			}
		</script>

		<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
		<script>
			if (!window.jQuery.ui) {
				document.write('<script src="js/libs/jquery-ui-1.10.3.min.js"><\/script>');
			}
		</script>

		<!-- JS TOUCH : include this plugin for mobile drag / drop touch events
		<script src="js/plugin/jquery-touch/jquery.ui.touch-punch.min.js"></script> -->

		<!-- BOOTSTRAP JS -->
		<script src="js/bootstrap/bootstrap.min.js"></script>

		<!-- CUSTOM NOTIFICATION -->
		<script src="js/notification/SmartNotification.min.js"></script>

		<!-- JARVIS WIDGETS -->
		<script src="js/smartwidgets/jarvis.widget.min.js"></script>

		<!-- EASY PIE CHARTS -->
		<script src="js/plugin/easy-pie-chart/jquery.easy-pie-chart.min.js"></script>

		<!-- SPARKLINES -->
		<script src="js/plugin/sparkline/jquery.sparkline.min.js"></script>

		<!-- JQUERY VALIDATE -->
		<script src="js/plugin/jquery-validate/jquery.validate.min.js"></script>

		<!-- JQUERY MASKED INPUT -->
		<script src="js/plugin/masked-input/jquery.maskedinput.min.js"></script>

		<!-- JQUERY SELECT2 INPUT -->
		<script src="js/plugin/select2/select2.min.js"></script>

		<!-- JQUERY UI + Bootstrap Slider -->
		<script src="js/plugin/bootstrap-slider/bootstrap-slider.min.js"></script>

		<!-- browser msie issue fix -->
		<script src="js/plugin/msie-fix/jquery.mb.browser.min.js"></script>

		<!-- FastClick: For mobile devices: you can disable this in app.js -->
		<script src="js/plugin/fastclick/fastclick.js"></script>

		<!--[if IE 7]>

		<h1>Your browser is out of date, please update your browser by going to www.microsoft.com/download</h1>

		<![endif]-->

		<!-- Demo purpose only -->
		<script src="js/demo.js"></script>

		<!-- MAIN APP JS FILE -->
		<script src="js/app.js"></script>
		
	</body>

						
						


<script type="text/javascript">
//http://www.proglogic.com/code/javascript/time/chronometer.php

	function createRowContent(rowObject, cellType, data) {
		var cell = document.createElement(cellType);
		var textNode = document.createTextNode(data);
		cell.appendChild(textNode);
		rowObject.appendChild(cell);
	}

	function createTableData(row, data){
		createRowContent(row, "td", data);
	}

	function createTableHeader(row, data){
		createRowContent(row, "th", data);
	}	
	
	// DO NOT REMOVE : GLOBAL FUNCTIONS!
	pageSetUp();
	
	// PAGE RELATED SCRIPTS

	var startTime = 0
	var start = 0
	var end = 0
	var diff = 0
	var timerID = 0
	var stopped = true;
	var checkCanStart = true;
	var checkCanStop = false;
	var speedFinal = "100";
	
	function chrono(){
		end = new Date()
		diff = end - start
		diff = new Date(diff)
		var msec = diff.getMilliseconds()
		var sec = diff.getSeconds()
		var min = diff.getMinutes()
		var hr = diff.getHours()-1
		if (min < 10){
			min = "0" + min
		}
		if (sec < 10){
			sec = "0" + sec
		}
		if(msec < 10){
			msec = "00" +msec
		}
		else if(msec < 100){
			msec = "0" +msec
		}
		document.getElementById("time-counter").innerHTML = sec + ":" + msec

		if (!stopped) {
			timerID = setTimeout("chrono()", 10);
		}
	}
	function chronoStart(){
		//document.chronoForm.startstop.value = "stop!"
		//document.chronoForm.startstop.onclick = chronoStop
		//document.chronoForm.reset.onclick = chronoReset
		start = new Date();
		stopped = false;
		checkCanStart = false;
		checkCanStop = true;
		chrono();
	}
	function chronoContinue(){
		//document.chronoForm.startstop.value = "stop!"
		//document.chronoForm.startstop.onclick = chronoStop
		//document.chronoForm.reset.onclick = chronoReset
		start = new Date()-diff
		start = new Date(start)
		chrono()
	}
	function chronoReset(){
		document.getElementById("time-counter").innerHTML = "00:000"
		start = new Date()
	}
	function chronoStopReset(){
		stopped = true;
		document.getElementById("time-counter").innerHTML = "00:000"
		//document.chronoForm.startstop.onclick = chronoStart
	}
	function chronoStop(){
		try {
			//document.chronoForm.startstop.value = "start!"
			//document.chronoForm.startstop.onclick = chronoContinue
			//document.chronoForm.reset.onclick = chronoStopReset
			clearTimeout(timerID);
			stopped = true;
			checkCanStart = false;
			checkCanStop = false;
			document.getElementById('dvBtReady').style.display 	= "none";
			document.getElementById('dvBtWait').style.display 	= "none";
			document.getElementById('dvBtStop').style.display 	= "block";			
	
			var jsonArg = new Object();
		    jsonArg.Time = document.getElementById("time-counter").innerHTML;
		    jsonArg.TypeChronometer = "0-" + speedFinal;
	
		    stringJson = JSON.stringify(jsonArg);
		    AndroidNativeCode.sendChronometerData(stringJson);
		    AndroidNativeCode.getTopCronometer();
		} catch (e) {
			return;
			
		}		    
			
	}

	function readyToStart() {
		chronoStopReset();
		checkCanStart = true;
		document.getElementById('dvBtReady').style.display 	= "none";
		document.getElementById('dvBtStop').style.display 	= "none";
		document.getElementById('dvBtWait').style.display 	= "block";

	}

	function resetToStart() {
		/*
		stopped = true;
		checkCanStart = true;
		checkCanStop = false;
		chronoStopReset();
		checkCanStart = true;
		AndroidNativeCode.reset();
		document.getElementById('dvBtWait').style.display 	= "none";
		document.getElementById('dvBtStop').style.display 	= "none";
		document.getElementById('dvBtReady').style.display 	= "block";
		*/
		location.href = 'chronometer.html';
	}	

	function checkStop() {
		if (checkCanStop) {
			var jsonArg = new Object();
		    jsonArg.speed = speedFinal;
	
		    stringJson = JSON.stringify(jsonArg);
		    AndroidNativeCode.checkStop(stringJson);
		}
	    setTimeout("checkStop()", 10);
	}

	function checkStart() {
		if (checkCanStart) {
	    	AndroidNativeCode.checkStart();
		}
		setTimeout("checkStart()", 10);		
	}	

	/*
	Funcão chamada através da classe .java para apresentar as informações de GPS.
	*/
	function setSpeedInfo(jsonObject)
	{

		try {
			
			speed 						= jsonObject.Speed;
			document.getElementById('txtSpeed').innerHTML 			= speed;
		
		} catch (e) {
			document.getElementById('txtSpeed').innerHTML 			= "0";
			return;
			
		}		

	}		

	/*
	Funcão que fica atualizando a velocidade.
	*/
	function reloadSpeedInfo() {
		try {
			AndroidNativeCode.getSpeedInfo();
			//fakeGPS();
			window.setTimeout('reloadSpeedInfo()', 10);
		} catch (e) {
			return;
		}	
	}	


	function createRowContent(rowObject, cellType, data) {
		var cell = document.createElement(cellType);
		var textNode = document.createTextNode(data);
		cell.appendChild(textNode);
		rowObject.appendChild(cell);
	}

	function createTableData(row, data){
		createRowContent(row, "td", data);
	}

	function createTableHeader(row, data){
		createRowContent(row, "th", data);
	}		

	function setChronometer(jsonListObject)
	{
		try {

			var table = document.getElementById("table-cronometer");
			var tbody = document.getElementById("tbodyid"); 
			//table.appendChild(tbody);

			var array  = jsonListObject;
			 for(i = 0; i < array.length; i++) {

				 var row = document.createElement("tr");
				 if (i % 2 == 0) {
					 	row.className  = "even";
					 } else {
						 row.className  = "odd";					 
					 }				 

				 createTableData(row, array[i].Position);
				 createTableData(row, array[i].Time);
				 createTableData(row, array[i].Model);

				 tbody.appendChild(row);
				 
			 }
			
		} catch (e) {
			AndroidNativeCode.showMessage("Error: (" + e.message + ")");
			return;
		}		
	}				
	//-->	

	chronoReset();
	checkStart();
	checkStop();
	reloadSpeedInfo();

	AndroidNativeCode.getTopCronometer();
</script>
	
</html>